<!DOCTYPE html>
<html lang="en">

<head>
    {{template "common/head.html" .}}
</head>
<style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
    }
    .page-register {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: -webkit-radial-gradient(circle, #fedd04, #fec305);
        background: radial-gradient(circle, #fedd04, #fec305);
    }
    .page-register-bg {
        position: absolute;
        background-image: url(/static/front/images/bg.png);
        background-size: cover;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    .page-register-logo {
        margin: 84px auto 0 auto;
        width: 123px;
        height: 67px;
        background-image: url(/static/front/images/slogan.png);
        background-size: cover;
    }
    .page-register-form {
        width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
    .page-register-form-item {
        margin-top: 10px;
    }
    .page-register .subject {
        padding: 7px 18px 8px 16px !important;
        height: 32px;
        border-radius: 3px !important;
    }
    .page-register-select-group {
        width: 100%;
    }
    .page-register-select-group select {

        min-width: 70px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70px;
        -ms-flex: 0 0 70px;
        flex: 0 0 70px;
        margin-right: 10px;
    }
    .page-register-select-group  {
        width: 100%;
        /* overflow: hidden;
         */
        justify-content: space-between
    }
    .page-register-select-group .style-select {
        -webkit-box-flex: 0 0 30%;
        -webkit-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
    }
    .m-input-label-1 {
        font-size: 12px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        flex: 0 0 100%;
        line-height: 12px;
        font-weight: 600;
    }
</style>

<body>
<div class="page-register">
    <div class="page-register-bg">
        <form id="data-form">
            {{.xsrfdata}}
            <input type="hidden" id="province_id" name="province_id" value="">
            <input type="hidden" id="city_id" name="city_id" value="">
            <input type="hidden" id="district_id" name="district_id" value="">
            <input type="hidden" id="school_id" name="school_id" value="">
            <input type="hidden" id="class_id" name="class_id" value="">
            <input type="hidden" id="course_id" name="course_id" value="">
            <input type="hidden" id="is_main" name="is_main" value="">
            <div class="page-register-logo"></div>
            <div class="ui-mg-t-24 page-register-form">
                {{if eq .loginUser.Identity 0}}
                    <div class="page-register-form-item">
                        <div class="m-input-wrapper m-input-has-floating-label">
                            <div flex="" class="m-input m-input-text m-input-floating-label">
                                <span class="m-input-label">手机号：</span>
                                <input id="phone" name="phone" type="text" placeholder="">
                            </div>
                        </div>
                    </div>
                    <div class="page-register-form-item">
                        <div class="m-input-wrapper m-input-has-floating-label">
                            <div flex="" class="m-input m-input-text m-input-floating-label">
                                <span class="m-input-label">验证码：</span>
                                <input id="verify_code" name="verify_code" type="text" placeholder="">
                            </div>
                        </div>
                    </div>
                    <div class="page-register-form-item" style="width: 31vw;">
                        <div class="m-input-wrapper m-input-has-floating-label">
                            <div flex="" class="m-input m-input-text m-input-floating-label">
                                <span class="m-input-label-1" onclick="getVerifyCode()" id="get-verify-code">点击获取验证码</span>
                            </div>
                        </div>
                    </div>
                    <div class="page-register-form-item">
                        <div class="m-input-wrapper m-input-has-floating-label">
                            <div flex="" class="m-input m-input-text m-input-floating-label">
                                <span class="m-input-label">姓名：</span>
                                <input id="real_name" name="real_name" type="text" placeholder="">
                            </div>
                        </div>
                    </div>
                {{end}}
                <div class="page-register-form-item">
                    <div flex="" class="page-register-select-group">
                        <div id="province" flex="" class="m-input m-input-text m-input-floating-label" style="width: 30%;padding-top: 7px;">
                            省：
                        </div>
                        <div id="city" flex="" class="m-input m-input-text m-input-floating-label" style="width: 30%;padding-top: 7px;">
                            市：
                        </div>
                        <div id="district" flex="" class="m-input m-input-text m-input-floating-label" style="width: 30%;padding-top: 7px;">
                            区/县：
                        </div>
                    </div>
                </div>
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div id="school" flex="" class="m-input m-input-text m-input-floating-label" style="font-size: 14px;">学校：</div>
                    </div>
                </div>
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div id="class" flex="" class="m-input m-input-text m-input-floating-label" style="font-size: 14px;">班级：</div>
                    </div>
                </div>
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div id="course" flex="" class="m-input m-input-text m-input-floating-label" style="font-size: 14px;">所教科目：</div>
                    </div>
                </div>
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div id="user-is-main" flex="" class="m-input m-input-text m-input-floating-label" style="font-size: 14px;">是否是班主任：</div>
                    </div>
                </div>
            </div>
        </form>
        <div class="m-button m-button-default m-button-block" style="width: 90px; margin: 32px auto 0px;" id="submit">提交</div>
    </div>
</div>
<form id="region_form">
    {{.xsrfdata}}
    <input type="hidden" id="region_id" name="id" value="">
    <input type="hidden" id="region_level" name="level" value="">
</form>
<form id="phone-form">
    {{.xsrfdata}}
    <input type="hidden" id="mobile" name="mobile" value="">
</form>
</body>

<script type="text/javascript">

    var canSubmit = true,
        mobileReg = /^[1][3,4,5,7,8,9][0-9]{9}$/,
        provinceJson = eval({{.provinceJson}}),
        courseJson = eval({{.courseJson}}),
        province, city, district, school, mClass, course, isMain,
        seconds = 60,
        canRequestCode = true;

    function getVerifyCode() {

        var mobile = $('#phone').val();
        if (mobile.length <= 0) {
            layer.open({content: '请输入手机号', skin: 'msg', time: 2});
            return false;
        }
        if (!mobileReg.test(mobile)) {
            layer.open({content: '请输入正确的手机号', skin: 'msg', time: 2});
            return false;
        }
        $('#mobile').val(mobile);

        if (!canRequestCode) {
            return false;
        }

        canRequestCode = false;
        $('#get-verify-code').text(seconds+'s');
        var getCodeLoadIndex = layer.open({type: 2});

        $.ajax({
            url: '{{urlfor "controllers.CommonController.SendMobileMsg"}}',
            type: 'POST',
            data: $('#phone-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(getCodeLoadIndex);
                layer.open({content: res.msg, skin: 'msg', time: 2});

            }
        });

        var timer = setInterval(function () {
            seconds--;
            if (seconds > 0) {
                $('#get-verify-code').text(seconds+'s');
            } else {
                $('#get-verify-code').text('发送验证码');
                canRequestCode = true;
                clearInterval(timer);
                seconds = 60;
            }
        }, 1000);

    }

    function cityReset() {
        city.updateWheel(0, [{id: "", value: "市："}]);
        $('#city').text("市：");
        $('#city_id').val('');
    }

    function districtReset() {
        district.updateWheel(0, [{id: "", value: "区/县："}]);
        $('#district').text("区/县：");
        $('#district_id').val('');
    }

    function schoolReset() {
        school.updateWheel(0, [{id: "", value: "学校："}]);
        $('#school').text("学校：");
        $('#school_id').val('');
    }

    function classReset() {
        mClass.updateWheel(0, [{id: "", value: "班级："}]);
        $('#class').text("班级：");
        $('#class_id').val('');
    }

    $(function () {

        $('#submit').click(function () {

            {{if eq .loginUser.Identity 0}}
                var phone = $('#phone').val();
                if (phone.length <= 0) {
                    layer.open({content: '请输入手机号', skin: 'msg', time: 2});
                    return false;
                }
                if (!mobileReg.test(phone)) {
                    layer.open({content: '请输入正确的手机号', skin: 'msg', time: 2});
                    return false;
                }
                if ($('#verify_code').val().length <= 0) {
                    layer.open({content: '请输入手机验证码', skin: 'msg', time: 2});
                    return false;
                }
                if ($('#real_name').val().length <= 0) {
                    layer.open({content: '请输入姓名', skin: 'msg', time: 2});
                    return false;
                }
            {{end}}
            if ($('#province_id').val().length <= 0) {
                layer.open({content: '请选择省', skin: 'msg', time: 2});
                return false;
            }
            if ($('#city_id').val().length <= 0) {
                layer.open({content: '请选择市', skin: 'msg', time: 2});
                return false;
            }
            if ($('#district_id').val().length <= 0) {
                layer.open({content: '请选择县', skin: 'msg', time: 2});
                return false;
            }
            if ($('#school_id').val().length <= 0) {
                layer.open({content: '请选择学校', skin: 'msg', time: 2});
                return false;
            }
            if ($('#class_id').val().length <= 0) {
                layer.open({content: '请选择班级', skin: 'msg', time: 2});
                return false;
            }
            if ($('#course_id').val().length <= 0) {
                layer.open({content: '请选择科目', skin: 'msg', time: 2});
                return false;
            }
            if ($('#is_main').val().length <= 0) {
                layer.open({content: '请选择您是否是班主任', skin: 'msg', time: 2});
                return false;
            }

            if (!canSubmit) return false;
            var loadIndex = layer.open({type: 2});
            canSubmit = false;

            $.ajax({
                url: '{{urlfor "teacher.IndexController.DoRegister"}}',
                type: 'POST',
                data: $('#data-form').serialize(),
                dataType: 'json',
                success: function (res) {

                    layer.close(loadIndex);
                    canSubmit = true;

                    layer.open({content: res.msg, skin: 'msg', time: 2});
                    if (res.status == 1) {
                        setTimeout(function () {
                            location.href = '{{urlfor "teacher.IndexController.Index"}}';
                        }, 1000);
                    }

                }
            });

        });

        province = new MobileSelect({
            trigger: '#province',
            title: '选择省',
            wheels: [
                {data: provinceJson}
            ],
            callback:function(indexArr, data){
                var id = data[0].id;
                $('#province_id').val(id);
                $('#region_id').val(id);
                $('#region_level').val(2);
                cityReset();
                districtReset();
                schoolReset();
                classReset();
                $.ajax({
                    url: '{{urlfor "controllers.CommonController.GetFrontRegionListByParent"}}',
                    type: "POST",
                    data: $('#region_form').serialize(),
                    success: function (res) {
                        res = eval(res);
                        if (res.data && res.data.length > 0) {
                            city.updateWheel(0, res.data);
                        }
                    }
                });
            }
        });

        city = new MobileSelect({
            trigger: '#city',
            title: '选择市',
            wheels: [
                {data: [{id: "", value: "市："}]}
            ],
            callback:function(indexArr, data){
                var id = data[0].id;
                $('#city_id').val(id);
                $('#region_id').val(id);
                $('#region_level').val(3);
                districtReset();
                schoolReset();
                classReset();
                $.ajax({
                    url: '{{urlfor "controllers.CommonController.GetFrontRegionListByParent"}}',
                    type: "POST",
                    data: $('#region_form').serialize(),
                    success: function (res) {
                        res = eval(res);
                        if (res.data && res.data.length > 0) {
                            district.updateWheel(0, res.data);
                        }
                    }
                });
            }
        });

        district = new MobileSelect({
            trigger: '#district',
            title: '选择区/县',
            wheels: [
                {data: [{id: "", value: "区/县："}]}
            ],
            callback:function(indexArr, data){
                var id = data[0].id;
                $('#district_id').val(id);
                $('#region_id').val(id);
                schoolReset();
                classReset();
                $.ajax({
                    url: '{{urlfor "controllers.CommonController.GetFrontSchoolByDistrict"}}',
                    type: "POST",
                    data: $('#region_form').serialize(),
                    success: function (res) {
                        res = eval(res);
                        if (res.data && res.data.length > 0) {
                            school.updateWheel(0, res.data);
                        }
                    }
                });
            }
        });

        school = new MobileSelect({
            trigger: '#school',
            title: '选择学校',
            wheels: [
                {data: [{id: "", value: "学校："}]}
            ],
            callback:function(indexArr, data){
                var id = data[0].id;
                $('#school_id').val(id);
                $('#region_id').val(id);
                classReset();
                $.ajax({
                    url: '{{urlfor "controllers.CommonController.GetFrontClassBySchool"}}',
                    type: "POST",
                    data: $('#region_form').serialize(),
                    success: function (res) {
                        res = eval(res);
                        if (res.data && res.data.length > 0) {
                            mClass.updateWheel(0, res.data);
                        }
                    }
                });
            }
        });

        mClass = new MobileSelect({
            trigger: '#class',
            title: '选择班级',
            wheels: [
                {data: [{id: "", value: "班级："}]}
            ],
            callback:function(indexArr, data){
                var id = data[0].id;
                $('#class_id').val(id);
            }
        });

        course = new MobileSelect({
            trigger: '#course',
            title: '选择科目',
            wheels: [
                {data: courseJson}
            ],
            callback:function(indexArr, data){
                var id = data[0].id;
                $('#course_id').val(id);
            }
        });

        isMain = new MobileSelect({
            trigger: '#user-is-main',
            title: '您是班主任吗？',
            wheels: [
                {data: [{id: "1", value: "是"}, {id: "0", value: "不是"}]}
            ],
            callback: function(indexArr, data) {
                var id = data[0].id;
                $('#is_main').val(id);
            }
        });

    });

</script>

</html>